<template>
  <div id="home">
    <el-container style="height: 100vh">
      <el-aside class="bms-aside" style="width:auto;">
        <BMSAside :shrink="shrink"/>
      </el-aside>
      <el-container>
        <el-header class="bms-header" style="height: 10vh;line-height: 10vh;box-shadow: 0 8px 8px 0 rgb(24 27 34 / 20%)">
          <BMSHeader @shrinkage="shrinkage()" />
        </el-header>
        <el-main class="bms-main">
          <BMSMain />
        </el-main>
        <el-footer class="bms-footer" style="height: 5vh;line-height: 5vh;box-shadow: 0 -8px 8px 0 rgb(24 27 34 / 20%)">
          <BMSFooter />
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import BMSAside from '@/components/bmsAside.vue';
import BMSHeader from '@/components/bmsHeader.vue';
import BMSFooter from '@/components/bmsFooter.vue';
import BMSMain from '@/components/bmsMain.vue';

export default {
  name: "home",
  components: { BMSFooter, BMSHeader, BMSAside, BMSMain},
  data() {
      return {
        shrink : true
      };
  },
  methods: {
    shrinkage() {
      this.shrink = !this.shrink
    }
  },
  mounted() {
    console.log(this.$router,"\src\view\home")
  }
}
</script>

<style scoped>

.bms-aside {
  background-color: rgb(81, 90, 110);
  color: #333;
}

.bms-header, .bms-footer {
  background-color: white;
  color: #333;
  text-align: center;
  z-index: 8;
}

.bms-main {
  background-color: #f2f3f5;
  color: #333;
}

 
</style>
